<script>
import Qrcode from 'qrcodejs2'
import copy from 'copy-to-clipboard';
import {getUrl} from "@/util/aihuman/getUrl";

export default {
  name: "ReleaseDialog",
  data() {
    return {
      dialogVisible: false,
      itemsData: {},
      qrcode: null,
      showQr: false
    }
  },
  methods: {
    open(data) {
      this.dialogVisible = true
      this.itemsData = data

      this.$nextTick(() => {
        this.creatQrCode();
      })
    },
    closeFn() {
      // Qrcode.clear()
    },
    downloadQR() {
      let container = document.querySelector('.qrcode')
      let img = container.querySelector('img')
      let imgSrc = img.src;
      const link = document.createElement('a');
      link.href = imgSrc;
      link.download = '二维码.jpg';
      document.body.appendChild(link);

      link.click();
      document.body.removeChild(link);
    },
    copyLink(val) {
      copy(val)
      this.$message.success('复制成功')
    },
    getUrl,
    creatQrCode() {
      let container = document.querySelector('.qrcode')
      container.innerHTML = ''
      this.qrcode = new Qrcode(this.$refs.qrCodeUrl, {
        text: `${this.getUrl}/aihumanShow/index.html?id=${this.itemsData.id}`, // 需要转换为二维码的内容
        width: 100,
        height: 100,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: Qrcode.CorrectLevel.H
      })

    },
  }
}
</script>

<template>
  <el-dialog
    title="发布与使用"
    :visible.sync="dialogVisible"
    width="600px"
    append-to-body
    @close="closeFn"
  >
    <div class="release-content" style="margin-bottom: 20px;">
      <div class="release-text">
        {{ getUrl() }}/aihumanShow/index.html?id=
        {{ itemsData.id }}

      </div>
      <div class="release-btn-block">
        <el-button type="text" @click="copyLink(`${getUrl()}/aihumanShow/index.html?id=${itemsData.id}`)">复制链接</el-button>
      </div>
    </div>

    <div v-if="itemsData.applyType === 3" class="release-content release-content--row">
      <div class="qrcode" ref="qrCodeUrl"></div>
      <div style="margin-right: 20px;">
        扫码体验
      </div>
      <div>
        <el-button type="primary" plain size="small" style="background: #fff; color:#333;" @click="downloadQR">下载二维码</el-button>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
  </el-dialog>
</template>

<style scoped lang="scss">
.qrcode {
  display: inline-block;
  background: #fff;
  padding: 8px;
  margin-right: 20px;

  img {
    width: 132px;
    height: 132px;
    background-color: #fff; //设置白色背景色
    padding: 10px; // 利用padding的特性，挤出白边
    box-sizing: border-box;
  }
}

.release-text {
  height: 60px;
}

.release-btn-block {
  display: flex;
  justify-content: flex-end;
  height: 20px;
  align-items: center;
}

.release-content {
  background: #EEEEEE;
  border-radius: 6px;
  color: #222222;
  padding: 15px;
  box-sizing: border-box;

  &--row {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}
</style>
